
<div class="modal fade" id="addResidentModal" tabindex="-1" role="dialog" aria-labelledby="addResidentModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="addResidentModalLabel">Add Resident</h4>
      </div>
      <form [formGroup]="myForm">
        <div class="modal-body">
            <div class="form-group text-left">
              <label for="residentID">Resident ID</label>
                <input formControlName="residentID" type="text" class="form-control">
                </div>      
            <div class="form-group text-left">
              <label for="firstName">First Name</label>  
                <input formControlName="firstName" type="text" class="form-control">          
            </div>
          
            <div class="form-group text-left">
              <label for="lastName">Last Name</label>  
                <input formControlName="lastName" type="text" class="form-control">          
            </div>

            <div class="form-group text-left">
              <label for="coinsValue">Coins Balance</label>  
                <input formControlName="coinsValue" type="text" class="form-control">          
            </div>

            <div class="form-group text-left">
              <label for="energyValue">Energy Value (meter reading)</label>  
                <input formControlName="energyValue" type="text" class="form-control">          
            </div>

            <div class="form-group text-left">
              <label for="energyUnits">Energy Units</label>  
              
              <div>
              <select name="energyUnits" formControlName="energyUnits">
                <option value="kwh">kWh</option>                
              </select>
              </div>      
            </div>

            <div class="form-group text-left">
              <label for="cashValue">Cash Value</label>  
                <input formControlName="cashValue" type="text" class="form-control">          
            </div>

            <div class="form-group text-left">
              <label for="cashCurrency">Cash Currency</label>  
              
              <div>
              <select name="cashCurrency" formControlName="cashCurrency">
                <option value="USD">USD</option>                
              </select>
              </div>        
            </div>

                
        </div>
        <div class="modal-footer">
          <button (click)="addResident(myForm);" type="submit" class="btn btn-success" data-dismiss="modal">Submit</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </form>
    </div>
  </div>
</div>


<div class="modal fade" id="updateResidentModal" tabindex="-1" role="dialog" aria-labelledby="updateResidentModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="updateResidentModalLabel">Update Asset</h4>
      </div>
      <form [formGroup]="myForm">
        <div class="modal-body">
            <div class="form-group text-left">
              <label for="residentID">ID</label>
                <input [ngModel]="residentID"formControlName="residentID" type="text" class="form-control">            
            </div>          
            <div class="form-group text-left">
              <label for="firstName">First Name</label>
                <input [ngModel]="firstName"formControlName="firstName" type="text" class="form-control">              
            </div>          
            <div class="form-group text-left">
              <label for="lastName">Last Name</label>
                  <textarea [ngModel]="lastName" formControlName="lastName" class="form-control" rows="3"></textarea>
            </div>
              
        </div>
        <div class="modal-footer">
          <button (click)="updateResident(myForm)" type="submit" class="btn btn-success" data-dismiss="modal">Submit</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </form>
    </div>
  </div>
</div>



<div class="modal fade" id="deleteResidentModal" tabindex="-1" role="dialog" aria-labelledby="deleteResidentModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="deleteResidentModalLabel">Delete Asset</h4>
      </div>
      <form [formGroup]="myForm" (ngSubmit)="deleteResident()">
        <div class="modal-body">
          Are you sure you want to delete this asset?
        </div>
        <div class="modal-footer">
          <button (click)="deleteResident()" type="submit" class="btn btn-danger" data-dismiss="modal">Yes</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
        </div>
      </form>
    </div>
  </div>
</div>






<div class="container">
  <div *ngIf="errorMessage" class="alert alert-danger" role="alert">
		<strong>Error:</strong> {{errorMessage}}
	</div>
  <div class="row">
   
      <h1 class="heading">Residents </h1>
  </div>

 <div class="row">
    <div class="col-md-12 text-right">
      <button (click)="resetForm()" type="button" class="btn btn-primary" data-toggle="modal" data-target="#addResidentModal">Add Resident</button>
    </div>
  </div>
  <br>
  <div class="row">
    <div class="col-md-12">
      <table class="table table-bordered table-responsive table-hover">
        <thead class="thead">
          <tr class="thead-cols">
            
                <th class="bc">ID</th>
            
                <th class="bc">First Name</th>
            
                <th class="bc">Last Name</th>  

                <th class="bc">Coins Balance</th>  

                <th class="bc">Energy Value</th>

                <th class="bc">Energy Units</th>

                <th class="bc">Cash Balance</th>

                <th class="bc">Cash Currency</th>

                <th class="bc">Actions</th>       
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let resident of allResidents">
          
                <td>{{resident.residentID}}</td>
            
                <td>{{resident.firstName}}</td>
            
                <td>{{resident.lastName}}</td>

                <td>{{resident.coinsValue}}</td>

                <td>{{resident.energyValue}}</td>

                <td>{{resident.energyUnits}}</td>

                <td>{{resident.cashValue}}</td>

                <td>{{resident.cashCurrency}}</td>
           
            <td>

              <button (click)="getForm(resident.residentID);" type="button" class="btn btn-success" data-toggle="modal" data-target="#updateResidentModal">Update</button>

              <button (click)="setId(resident.residentID);" type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteResidentModal">Delete</button>

            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

</div>